import React, { Component } from 'react'
import './equipmentall.scss'
import { Toast, Modal } from 'antd-mobile';
const alert = Modal.alert;
const element1 =(
  <><img src="images/jg_03.png" alt=""/><p>关机指令发送成功！</p></>
)
const element2 =(
  <><img src="images/jg_03.png" alt=""/><p>设备重启指令发送成功！</p></>
)
const element3 =(
  <><img src="images/jg_03.png" alt=""/><span>设置密码已初始化为'888888'！</span></>
)
class Com extends Component {
  state={
    fall:false
  }
  render () {
    return (
      <>
        <header className="header equipmentall-header">
          <div className="equipmentall-h-s">
            <span className="iconfont icon-arrow-left" onClick={() => {
              window.history.back()
            }}></span>
            <span>设备管控</span>
            <span className="equipmentall-cz" onClick={() =>
              alert('一键全关', '请确认是否继续关闭全部设备', [
                { text: '取消', onPress: () => console.log('cancel') },
                { text: '继续', onPress: () => {
                  Toast.info(element1, 1);
                } },
              ])
            }>一键全关</span>
          </div>  
        </header>
        <div className="content equipmentall-content">
          <div className='box equipmentall-box'>
            <div className="equipmentall-h-x">
              当前共15台设备运行中
            </div>
            <ul className="equipmentall-ul">
              <li onClick={() =>{
                this.setState({
                  fall:true
                })
              }
              }>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_06.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_06.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_06.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_06.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_06.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
              <li>
              <img src="./images/equipment-img/banpai_03.png" alt="" />
                <p>高一（1）班</p>
                <span>00-01-6c-06-a6-29</span>
              </li>
            </ul>
          </div>
        </div>
        { this.state.fall ? 
          <>
          <div className="modalk">
          <p>设备详情</p>
          <ul>
            <li><span>运行状态：</span><span>已关机</span></li>
            <li><span>设备名称：</span><span>高二（4）班</span></li>
            <li><span>设备运行时间：</span><span>08:23:23</span></li>
            <li><span>下次关机时间：</span><span>2018-09-12  18:00:00</span></li>
            <li><span>设备MAC地址：</span><span>00-01-6c-06-a6-29</span></li>
          </ul>
          <div className="modalk-footer">
            <img src="./images/equipment-img/caozuo_03.png" alt="" onClick={() =>{
                Toast.info(element1, 1);
                this.setState({
                  fall:false
                })
              }
              }/>
            <img src="./images/equipment-img/caozuo_05.png" alt="" onClick={() =>{
              Toast.info(element2, 1);
                this.setState({
                  fall:false
                })
              }
              }/>
            <img src="./images/equipment-img/caozuo_07.png" alt="" onClick={() =>{
              Toast.info(element3, 1);
                this.setState({
                  fall:false
                })
              }
              }/>
          </div>
          <img onClick={() =>{
                this.setState({
                  fall:false
                })
              }
              }
              className="xxxx" src="./images/equipment-img/caozuo_13.png" alt=""
          />
        </div>
        <div className="zzc"></div>
        </>
        : null }
      </>
    )
  }
}

export default Com